<!-- 沟通记录编辑 -->
<template>
	<view style="background-color: #fff;height: 100%;">
		<!-- 自定义头部组件 -->
		<HeaderTitle title="新建沟通记录" :isBack="true" :isSearch="false" />
		<div style="padding: 30rpx;">

			<uni-forms ref="form" :modelValue="entity" label-width="100px">
				<div>
					<uni-forms-item label="客户名称：" :rules="$rules.handle.CustomerName" required name="CustomerName">
						<view @click="CustomerChoice">
							<uni-easyinput v-model="entity.CustomerName" placeholder="请选择客户" suffixIcon="compose"
								:disabled="true" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="日期：" :rules="$rules.handle.DailyRecordDate" required name="DailyRecordDate">
						<view @click="isCalendar=true">
							<uni-easyinput v-model="entity.DailyRecordDate" placeholder="请选择日期" :disabled="true" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="标题：" :rules="$rules.handle.DailyRecordTitle" required
						name="DailyRecordTitle">
						<uni-easyinput v-model="entity.DailyRecordTitle" placeholder="请输入标题" :disabled="disabled" />
					</uni-forms-item>
					<uni-forms-item label="抄送：">
						<view @click="$refs.UniPopup.openForm()">
							<uni-easyinput v-model="entity.SharerName" placeholder="请选择抄送" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="关键字：">
						<uni-easyinput type="text" confirmType="done" v-model="keyword" placeholder="请使用【回车】分词"
							:disabled="disabled" @confirm="down" />
					</uni-forms-item>
					<view v-if="WordList.length>0" style="display: flex;padding: 10rpx;flex-wrap: wrap;">
						<u-tag style="margin-right: 15rpx;margin-bottom: 15rpx;" closeable
							v-for="(item, index) in WordList" :key="index" :text="item" @close="tagClick(index)"
							type="info" />
					</view>

					<uni-forms-item label="交流内容:" :rules="$rules.handle.DailyRecord" required name="DailyRecord">
						<uni-easyinput v-model="entity.DailyRecord" placeholder="请输入交流内容" :disabled="disabled"
							@keydown.enter.stop="down" type="textarea" />
					</uni-forms-item>
					<uni-forms-item label="上传附件" class="uploadFile">
						<Upload ref="Upload" :disabled="disabled" @handlerSuccess="handlerSuccess"
							:action="$ActionUrl+'/CustomerManagement/SalesmanDailyRecord/UploadFileByForm'"
							@handlerRmoveFile="handlerRmoveFile">
						</Upload>
					</uni-forms-item>

				</div>
			</uni-forms>
			<div class="submitButton">
				<u-button :disabled="disabled" type="primary" style="font-size: 14px;margin-top: 20rpx;"
					@click="onSubmit()" :loading="loading">提交</u-button>
			</div>
			<Myuser @customerChoice="Client" ref="myuser" />
			<Product @Product="Product" ref="product" />
			<!-- 选择日期 -->
			<u-calendar v-model="isCalendar" :mode="mode" placeholder="请选择日期" @change="calendarChange"></u-calendar>
			<!-- 抄送人下拉列表数据 -->
			<!-- 执行人弹出层 -->
			<UniPopup ref="UniPopup" @confrim="UniPopupConfrim" />
			<!-- 	<u-picker mode="selector" v-model="isShowPickerRealName" :default-selector="[0]" :range="selectorObjRealName"
				:range-key="rangeKeyRealName" @confirm="showPickerChangeRealName"></u-picker> -->
			</u-popup>
		</div>

	</view>

</template>

<script>
	import {
		Base_ManageBase_UserGetDataList,
		SalesmanDailyRecordSaveData
	} from '@/api/interface.js'
	// 引入执行人组件
	import UniPopup from "../../components/UniPopup.vue";
	import Upload from "../../components/upload.vue"
	//客户
	// import Myuser from "@/components/OwnUser.vue";
	import Myuser from "@/components/OwnUser.vue";
	import Product from "../../components/Product.vue";

	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	export default {
		props: {
			parentObj: Object,
		},
		components: {
			UniPopup,
			Upload,
			Myuser,
			Product,
			HeaderTitle
		},
		data() {
			return {
				// 附件上传的列表
				uploadFile: [],
				title: "",
				loading: false,
				// 是否显示日期弹窗
				isCalendar: false,
				isShowPickerRealName: false, //是否展示抄送人下拉列表
				// 这种情况需要指定range-key为cateName，否则组件不知道该显示对象的哪个属性
				selectorObjRealName: [], //抄送人下拉列表数据
				// 日期选择
				mode: 'date',
				rangeKeyRealName: "RealName",
				// // 解决表单输入移动端键盘弹起导致的页面fixed定位元素布局错乱问题
				// docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
				// showHeight: document.documentElement.clientHeight || document.body.clientHeight,
				// 按钮是否禁用
				disabled: false,
				// 上传附件列表数据
				fileList: [{
					url: ""
				}, ],
				pagination: {
					current: 1,
					pageSize: 10,
				},
				WordList: [],
				// 关键字
				keyword: "",
				entity: {},
				data: [],
				Id: "",
				info: "",
				thumbUrl: "",
				options: {}
			};
		},
		onLoad(options) {
			this.options = options
			console.log('传递过来的沟通记录参数---', this.options)
			// 默认处理附件上传删除图标按钮
			this.disabled = false
			this.$nextTick(function() {
				this.$refs.Upload.show = false
				this.$refs.Upload.deletable = true
			})

			console.log(options)
			//默认赋值当前选择日期
			let time = this.$moment().format("YYYY-MM-DD");
			this.entity.DailyRecordDate = time
			// 获抄送下拉列表数据
			this.getUserData();
		},
		methods: {
			// 附件上传成功
			handlerSuccess(file) {
				this.uploadFile = file
				this.entity.SDRDTOList = this.uploadFile.map(item => {
					return {
						FileURL: item.url
					}
				})
				this.entity.File = this.entity.SDRDTOList.map(item => {
					return item
				})
				console.log('上传成功了,传递到父组件中的附件附件附件-this.uploadFile--------------------------', this.uploadFile)
			},
			// 附件删除
			handlerRmoveFile(file) {
				this.uploadFile = file
				this.entity.SDRDTOList = this.uploadFile.map(item => {
					return {
						FileURL: item.url
					}
				})
				this.entity.File = this.entity.SDRDTOList.map(item => {
					return item
				})
				console.log('附件删除了传递过来父组件中的----this.uploadFile--------', this.uploadFile)
			},
			// 选择日期
			calendarChange(event) {
				this.entity.DailyRecordDate = event.result
			},
			// 抄送人回调
			UniPopupConfrim(list) {
				this.$forceUpdate()
				let SharerNameArr = list.map(item => ({
					ExecutorId: item.Id,
					ExecutorName: item.RealName
				}));
				let SharerName = SharerNameArr.map(item => {
					return item.ExecutorName
				}).join("|");
				let SharerIds = SharerNameArr.map(item => {
					return item.ExecutorId
				}).join("|");
				// 抄送人赋值
				this.entity.SharerName = SharerName
				this.entity.SharerIds = SharerIds
				this.$refs.UniPopup.close()

			},
			// 抄送人点击事件
			showPickerClickRealName(item) {
				this.isShowPickerRealName = true
			},

			// 选择抄送下拉列表数据
			getUserData() {
				Base_ManageBase_UserGetDataList({
						PageIndex: this.pagination.current,
						PageRows: 100,
						SortField: "CreateTime",
						SortType: "desc",
						Search: {}
					})
					.then(resJson => {
						this.selectorObjRealName = resJson.Data.map(item => {
							return {
								id: item.Id,
								RealName: item.RealName
							}
						})
						this.loading = false;
					});
			},

			// 获取沟通记录详情
			GetTheDataDetail(ID) {
				SalesmanDailyRecordGetTheData({
						id: ID,
					})
					.then((res) => {
						if (res.Success) {
							this.entity = res.Data;
							this.$set(this.entity, "File", []);
							// 时间格式化 去掉末尾的000
							this.entity.DailyRecordDate = this.entity.DailyRecordDate.replace(
								".000",
								""
							);
							// 渲染关键字
							this.WordList = res.Data.DRKeyWordList;
						} else {

							this.$errorToast(res.Msg);
						}
					});
			},
			// 关键字删除
			tagClick(index) {
				if (this.disabled == false) {
					this.WordList.splice(index, 1);
				}
			},
			// 关键字
			down() {
				if (this.disabled == false) {
					if (!this.WordList) {
						this.WordList = [];
					}
					console.log(this.keyword);
					console.log(this.WordList);
					let a = this.WordList.includes(this.keyword);
					if (!a && this.keyword != "") {
						this.WordList.push(this.keyword);
					} else {
						this.$errorToast("关键字不能重复或者为空");
					}
					this.keyword = "";
				}
			},

			formatDate(date) {
				var time = new Date(date);
				var y = time.getFullYear();

				return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			//选中的产品
			Product(a) {
				this.data.push({
					ProductId: a.cInvCode,
					cInvName: a.cInvName,
					cInvCode: a.cInvCode,
					cInvStd: a.cInvStd,
				});
			},

			Client(a) {
				console.log(a);
				this.$set(this.entity, "CustomerName", a.cCusName);
				this.entity.CustomerId = a.Id;
			},
			//选择客户
			CustomerChoice() {
				this.$refs.myuser.openForm(this.options);
			},
			getDataList() {
				this.http
					.post("/QuotationManagement/Quot_OfferSheetMain/GetTheDataOfAll", {
						SortField: "Id",
						SortType: "desc",
						Search: {
							Condition: "Id",
							Keyword: this.Id,
						},
					})
					.then((res) => {
						if (res.Success) {
							// this.entity = res.Data;
							this.data = res.Data.QOSD_List;
						} else {
							Toast(res.Msg);
						}
					});
			},
			init() {
				this.data = [];
				this.WordList = [];
				this.entity = {};
				this.$set(this.entity, "DailyRecord", "");
				this.http.post("/Base_Manage/Home/GetOperatorInfo").then((resJson) => {
					this.info = resJson.Data.UserInfo;
				});
			},

			// 表单提交
			onSubmit() {
				var that = this
				this.$refs.form.validate().then(res => {
					this.loading = true
					uni.showLoading({
						title: '新建中'
					})
					this.entity.SalesmanName = uni.getStorageSync('RealName');
					this.entity.DRKeyWordList = this.WordList;
					console.log('开始新建了----', this.entity)
					SalesmanDailyRecordSaveData(this.entity)
						.then((res) => {
							if (res.Success) {
								this.$sucessToast("新建成功");
								setTimeout(() => {
									this.loading = false;
									uni.navigateBack()
									uni.hideLoading()
								}, 2500);
							} else {
								this.$errorToast(res.Msg);
								this.loading = false;
								uni.hideLoading()
							}
						});

				}).catch(err => {
					this.$errorToast(err)
					uni.hideLoading()
					that.loading = false
				})

			},
			// 打开编辑页
			openForm(row) {
				this.init();

				if (row) {
					// this.entity = row;
					this.WordList = this.entity.DRKeyWordList;
					if (this.entity.DailyRecordDate) {
						console.log(this.entity.DailyRecordDate);
						this.entity.DailyRecordDate = this.entity.DailyRecordDate.substring(
							0,
							10
						);
					}
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	// 覆盖带有uni-forms-item的upload附件的样式位置
	::v-deep.uni-forms-item.uploadFile {
		display: flex !important;
		flex-direction: column;
	}

	/* 适配底部导航栏 */
	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 150px;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(150rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(150rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}

	.van-field--min-height .van-field__control {
		min-height: 104px !important;
	}

	.scrollBar {
		height: calc(100vh - 230px);
		/* padding-bottom: 80px; */
		overflow: auto;
	}

	.close {
		position: "absolute";

		right: 0;
		bottom: 0;
		padding: "5px 16px";
		background: "#fff";
		text-align: right;
		z-index: 1;
	}


	.box {
		width: 80%;
		height: 200px;
		overflow: auto;
		margin: 0 auto;

		border: 1px solid #ccc;
		/* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

		margin-top: 20px;
		margin-bottom: 10px;
	}

	.tagClass {
		color: #000;
		padding: 5px;
		background-color: #ccc;
		border-radius: 8px;
		margin-left: 5px;
		padding-left: 10px;
	}
</style>